<template>
  <el-select v-model="spuId" placeholder="请选择商品" clearable class="!w-240px">
    <el-option
      v-for="spuOption in spuOptions"
      :key="spuOption.id"
      :label="spuOption.name"
      :value="spuOption.id"
    />
  </el-select>
</template>
<script lang="ts" setup>
import { Spu, getSpuSimpleList } from '@/api/mall/product/spu'

/** Spu选择框 **/
defineOptions({ name: 'SpuSelect' })

const props = defineProps({
  /** 下拉框选中值 **/
  modelValue: {
    type: Number,
    default: undefined
  }
})
const emit = defineEmits(['update:modelValue'])

const spuId = computed({
  get() {
    return props.modelValue
  },
  set(value: any) {
    emit('update:modelValue', value)
  }
})

const spuOptions = ref<Spu[]>([])

const getList = async () => {
  spuOptions.value = await getSpuSimpleList()
}

/** 初始化 */
onMounted(() => {
  getList()
})
</script>
